<template>
        <slider class="slider" interval="3000" auto-play="true" :index="0" v-if="spread">
            <div class="frame" v-for="(img, idx) in spread.advs" @click="goToBook(img.link)" :key="'slider-'+idx">
                <image class="image" resize="cover" :src="img.img"></image>
            </div>
        </slider>
</template>

<script>
    export default {
        name: "bar-slider",
        props:{
            spread:{
                type: [Array,Object],
                default: undefined,
            }
        },
        data(){
            return {

            }
        },
        methods:{
            goToBook(link) {
                this.$router.push({'name': 'bookInfo', query: {bookId: link}});
            },
        },
        mounted(){
            console.log(this.spread)
        }
    }
</script>

<style scoped>
    .row{
        flex-direction: row;
    }

    .image {
        width: 700px;
        height: 285px;
    }
    .slider {
        margin-top: 25px;
        margin-left: 25px;
        width: 700px;
        height: 285px;
        border-width: 2px;
        border-style: solid;
        border-color: #41B883;
    }
    /*.frame {*/
        /*width: 700px;*/
        /*height: 700px;*/
        /*position: relative;*/
    /*}*/
</style>